<template>
  <div class="smart_body">
    <div class="smart_body_msg">
      <div class="smart_body_tip">
        <span>AI智能客服</span>
        <span style="font-size:12px;color:gray">我有的,即秒达</span>
      </div>
      <div class="smart_body_column" ref="msg_list">
        <div
          :id="'msg_' + i"
          v-for="(item, i) in chatArray"
          :key="i"
          :class="item.pos === 0 ? 'smart_body_item-left' : 'smart_body_item-right'"
        >
          <img v-if="item.pos === 0" src="../../../../../assets/logo.png" alt />
          <div v-if="item.pos === 0" v-html="item.msg" @click="getAnswer($event)"></div>
          <div v-if="item.pos === 1" v-html="item.msg"></div>
        </div>
      </div>
    </div>
    <div class="smart_body_input">
      <div class="smart_body_search">
        <ul class="smart_body_search-list" v-if="searchCount > 0">
          <li
            v-for="(item, i) in searchArray"
            :key="i"
            :data-answer="item.answer"
            @click="getAnswer(item.question)"
          >{{ item.question }}</li>
        </ul>
        <textarea ref="msg_input" placeholder="请输入你遇到的问题" v-model="searchData"></textarea>
      </div>
      <button @click="addMsg">提交</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchData: null,
      searchArray: [],
      searchCount: 0,
      chatArray: [
        { msg: "欢迎使用荔枝农技智能问答，请通过关键词输入你的问题", pos: 0 }
      ]
    }
  },
  watch: {
    searchData(e) {
      if (e === '') {
        this.searchArray = null;
        this.searchCount = 0;
        return;
      }
      // this.searchKey(e);
    },
    chatArray() {
      this.$refs.msg_list.scrollTop = this.$refs.msg_list.scrollHeight;
    }
  },
  methods: {
    searchKey(key) {
      this.$axios.get('api/intelligentQA/getAnswer', {
        params: {
          question: key,
          pageNum: 1,
          pageSize: 200
        }
      }).then(({data}) => {
        this.searchArray = data.data;
        this.searchCount = this.searchArray.length;
      })
    },
    searchKeyToMsg(key) {
      this.$axios.get('api/intelligentQA/getAnswer', {
        params: {
          question: key,
          pageNum: 1,
          pageSize: 200
        }
      }).then(({data}) => {
        let mMsg = '';
        if (data.data.length === 0) {
          this.chatArray.push({ msg: `我不知道你说的是啥米~<br><div>这边建议您使用在线诊断进行提问~</div>`, pos: 0 });
          return;
        }
        mMsg += "我猜你想知道：<br>";
        for (let i of data.data) {
          mMsg += `<div class="answer" data-answer="${i.answer}" style="color:blue;text-decoration: underline;cursor:pointer">${i.question}</div>`;
        }
        this.chatArray.push({ msg: mMsg, pos: 0 });
      })
    },
    getAnswer(e) {
      console.log(e)
      if (typeof (e) === "object") {
        e = e.target.innerText;
      }
      if (e.indexOf("答：") !== -1 || e.indexOf("欢迎使用") !== -1) {
        return;
      }
      const mMsg = Array.from(document.getElementsByClassName('answer')).find(item => {
        if (item.innerText === e) return item
      }).dataset.answer
      this.chatArray.push({ msg: e, pos: 1 });
      this.chatArray.push({ msg: mMsg, pos: 0 });
      this.searchData = '';
      this.searchArray = [];
    },
    addMsg() {
      this.chatArray.push({ msg: this.searchData, pos: 1 });
      this.searchKeyToMsg(this.searchData);
      this.searchData = '';
    }
  }
}
</script>

<style scoped>
.smart_body {
  max-width: 1000px;
  height: 100%;
  padding: 10px;
  margin: 0 auto;
}
.smart_body_msg {
  height: 400px;
  border: 1px solid #e0e0e0;
  background-color: #f5f5f5;
}
.smart_body_input {
  padding: 20px 10px;
  height: 180px;
  border: 1px solid #e0e0e0;
  background-color: #fff;
}
.smart_body_tip {
  background-color: #fff;
  border-left: 10px solid skyblue;
  height: 50px;
  padding-left: 10px;
  line-height: 50px;
}
.smart_body_column {
  height: 330px;
  overflow-y: scroll;
}
.smart_body_input textarea {
  /* font-size: ; */
  width: 100%;
  height: 150px;
  box-sizing: border-box;
  resize: none;
  outline: none;
  border: 1px solid #e0e0e0;
  padding: 10px;
  transition: all 1s;
}
.smart_body_input textarea:hover {
  border-color: black;
}
.smart_body_input button {
  float: right;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  padding: 5px 10px;
  margin-top: 5px;
  outline: none;
  cursor: pointer;
  transition: all 1s;
  width: 100%;
}
.smart_body_input button:hover {
  border-color: gray;
  color: blue;
}
.smart_body_column {
  padding: 10px;
}
.smart_body_item-left,
.smart_body_item-right {
  clear: both;
  display: flex;
  margin: 10px 0;
  word-wrap: break-word;
}
.smart_body_item-left img,
.smart_body_item-right img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid #e0e0e0;
  background-color: var(--headerColor);
}
.smart_body_item-left > div,
.smart_body_item-right > div {
  max-width: 220px;
  margin-left: 5px;
  height: 100%;
  background-color: #fff;
  padding: 10px;
  position: relative;
  top: 15px;
}
.smart_body_item-left {
  float: left;
}
.smart_body_item-right {
  float: right;
}
.smart_body_item-left > div {
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
.smart_body_item-right > div {
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
}
.smart_body_search {
  position: relative;
}
.smart_body_search-list {
  position: absolute;
  margin: 0;
  padding: 10px;
  list-style: none;
  top: -100px;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--borderColor);
  background-color: #fff;
  height: 100px;
  overflow-y: scroll;
}
.smart_body_search-list li {
  cursor: pointer;
  border-bottom: 1px solid #e0e0e0;
  padding: 5px;
}
.smart_body_search-list li:hover {
  background-color: skyblue;
}
</style>